<template>
	<div class="home">
		<div class="home-head">
			<div class="home-headtop">
				<a href="" class="fa fa-list-ul list"></a>
				<div class="logo"></div>
				<a class="search" href="">
					<input type="text" />
					<span>
					<i class="fa fa-search"></i>
					夏装女 T恤
				</span>
				</a>
			</div>
		</div>
		<div class="home-lunbo"style="height: 120px;width: 360px; ">
			<swiper style="width: 100%;height: 100%;"  :list="baseList" auto v-model="demo0_index"></swiper>
		</div>
		<div class="home-main">		
			<ul class="lists" >
				<li>	
					<a href="#/mytao">
						<img src="//gw.alicdn.com/tfs/TB1hv0Jo3oQMeJjy1XaXXcSsFXa-120-120.png" alt="" />
						<p>我的淘宝</p>
					</a>
				</li>	
				<li>
					<a href="#">
						<img src="//gw.alicdn.com/tfs/TB1otNVo3MPMeJjy1XbXXcwxVXa-120-120.png" alt="" />
						<p>聚划算</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="//gw.alicdn.com/tfs/TB1CjxOo3oQMeJjy0FnXXb8gFXa-120-120.png" alt="" />
						<p>天猫</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="//gw.alicdn.com/tfs/TB1ptNVo3MPMeJjy1XbXXcwxVXa-120-120.png" alt="" />
						<p>淘抢购</p>
					</a>	
				</li>
				<li>
					<a href="#">
						<img src="//gw.alicdn.com/tfs/TB1sBero3oQMeJjy0FoXXcShVXa-120-120.png" alt="" />
						<p>专享优惠</p>
					</a>
				</li>
			</ul>
			<div class="home-main-item">
				<a href="">
					<img src="//gw.alicdn.com/tfs/TB1UuWAahrI8KJjy0FpXXb5hVXa-750-160.jpg_q75.jpg" alt="" />
				</a>
			</div>
			<div class="home-main-hot">
				<h3>
					<span>热门行业</span>
				</h3>
				<ul class="hot" v-for="list in hot">
					<li class="list" v-for="item in list">
						<a href="#/collection">
							<p class="name">
							{{item.name}}
						</p>
						<p class="info">{{item.info}}</p>
						<img :src="item.img" alt="" />
						</a>
					</li>
				</ul>
			</div>
		</div>
			
	</div>
</template>

<script>
	import { Swiper, SwiperItem } from 'vux'
	
	const baseList = [{
			url: 'javascript:',
			img: 'https://img.alicdn.com/tfs/TB1VqSoar_I8KJjy1XaXXbsxpXa-640-200.jpg',

		}, {
			url: 'javascript:',
			img: 'https://img.alicdn.com/simba/img/TB1XRj0awvD8KJjSsplSuuIEFXa.jpg',

		}, {
			url: 'javascript:',
			img: 'https://img.alicdn.com/simba/img/TB13QL0kvNNTKJjSspeSuuSwpXa.jpg',

		},
		{
			url: 'javascript:',
			img: 'https://img.alicdn.com/simba/img/TB1XRj0awvD8KJjSsplSuuIEFXa.jpg',

		},
		{
			url: 'javascript:',
			img: '//gw.alicdn.com/tfs/TB11W7SXHYI8KJjy0FaXXbAiVXa-640-200.jpg',
		},

		{
			url: 'javascript:',
			img: '//img.alicdn.com/tfs/TB1abTbaNrI8KJjy0FpXXb5hVXa-640-200.jpg',
		},
		{
			url: 'javascript:',
			img: 'https://gw.alicdn.com/imgextra/TB23a_xaNPI8KJjSspoXXX6MFXa_!!93-0-luban.jpg_q50.jpg',
		},
		{
			url: 'javascript:',
			img: 'https://gw.alicdn.com/imgextra/TB2O4SKXVYM8KJjSZFuXXcf7FXa_!!98-0-luban.jpg_q50.jpg',
		},
	]

	export default {
		data: function() {
			return {
				baseList: baseList,
				demo0_index: 0,
				hotLists:[
					{
						name:'潮流女装',
						info:'品质精选',
						img:'//gw.alicdn.com/tfs/TB1Pi2CSpXXXXX4aXXXXXXXXXXX-264-264.png'
					},
					{
						name:'精品男装',
						info:'潮流品质之选',
						img:'//gw.alicdn.com/tfs/TB1KdnjSpXXXXXVaFXXXXXXXXXX-264-264.png'
					},
					{
						name:'运动健身',
						info:'打牌折扣抢',
						img:'//gw.alicdn.com/tfs/TB1Q7GhSpXXXXcJXVXXXXXXXXXX-264-264.png'
					},
					{
						name:'时尚箱包',
						info:'给你新时尚',
						img:'//gw.alicdn.com/tfs/TB1Pi5CSpXXXXa5XpXXXXXXXXXX-264-264.png'
					},
					{
						name:'母婴玩具',
						info:'辣妈萌宝精选',
						img:'//gw.alicdn.com/tfs/TB1bcGASpXXXXbWXpXXXXXXXXXX-264-264.png'
					},
					{
						name:'生活家居',
						info:'品质健康生活',
						img:'//gw.alicdn.com/tfs/TB1mmynSpXXXXaVXVXXXXXXXXXX-264-264.png'
					},
					{
						name:'美妆护肤',
						info:'更美丽更幸福',
						img:'//gw.alicdn.com/tfs/TB1dOF8SpXXXXaGapXXXXXXXXXX-264-264.png'
					},
					{
						name:'美食特产',
						info:'好货来袭',
						img:'//gw.alicdn.com/tfs/TB1nSurSpXXXXctXFXXXXXXXXXX-264-264.png'
					},
				]
				
			}

		},
		components: {
			Swiper,
			SwiperItem
		},
		computed: {
			
			hot:function(){
				var num = 8;
				var arr1 = [];
				var start = 0;
				var count = Math.ceil(this.hotLists.length / num);
				for(var i = 0; i < count; i++) {
					arr1.push(this.hotLists.slice(start, start + num));
					start += num;
				}
				return arr1;
			}
		}
	}
</script>

<style scoped="">
	.home {
		width: 360px;
		/*height: 640px;*/
		background: #eee;
		
	}
	
	.home-head {
		padding: 10px;
		line-height: 35px;
	}
	
	.home-head .home-headtop .list {
		color: #999;
		font-size: 18px;
		display: inline-block;
		float: left;
		margin-top: 5px;
	}
	
	.home-headtop {
		position: relative;
	}
	
	.logo {
		background: url(../assets/logo.png) no-repeat;
		background-size: 40%;
		background-position: 110px;
		height: 30px;
		width: 100%;
	}
	
	.home-headtop input {
		margin-top: 5px;
		width: 100%;
		line-height: 35px;
		border: solid 1px #eee;
		cursor: pointer;
	}
	
	.home-headtop span {
		position: absolute;
		top: 36px;
		color: #999;
		font-size: 14px;
		padding-left: 10px;
	}
	.home-headtop span i{
		margin-right: 12px;
		font-size: 15px;
		color: #ccc;
	}
	.home-main{
		margin: 15px 0;
		text-align: center;
	}
	.home-main .lists {
		margin: 0;
		padding: 0;
		list-style: none;
		margin: 0 5px;
	}
	.home-main .lists  li{
		width: 70px;
		float: left;
		margin-bottom: 15px;
	}
	.home-main .lists  li a{
		color: #555;
		font-size: 14px;
	}
	.home-main .lists  li img{
		width: 60px;
	}

	.home-main-item a img{
		width: 100%;
	}
	.home-main-hot{
		margin: 10px 0;
		height: 240px;
		
	}
	.home-main-hot h3{
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		line-height:40px;
		font-weight: normal;
		font-size: 15px;
		text-align: left;
	}
	.home-main-hot h3 span{
		border-left:solid 5px red;
		padding-left: 15px;
		margin-right: 15px;
		
	}
	.home-main-hot .hot{
		margin: 0;
		padding: 0;
		list-style: none;
		
		margin-bottom: 50px;
		overflow: hidden;
	}
	.home-main-hot .hot li {
		float: left;
		width: 88px;
		text-align:center ;
		margin: 0;
		border:  solid 1px #ccc;
	}
	.home-main-hot .hot li img{
		width: 100%;
		height: 80px;
	}
	.home-main-hot .hot li a{
		color: #333;
	}
	.home-main-hot .hot li .name{
		font-size: 14px ;
	}
	.home-main-hot .hot li .info{
		font-size: 13px;
		color: #999;
	}
</style>